<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title><h:outputText value="#{msg.tituloWeb}" /></title>
        <link type="text/css" href="css/default.css" rel="stylesheet" />
        <link type="text/css" rel="stylesheet" href="../../comprador/css/loginCliente.css" />
        <script src="js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(".maskCPF").mask("999.999.999-99");
                $(".maskCNPJ").mask("99.999.999/9999-99");
            });
        </script>
        <style type="text/css" media="all">
            h1,h2,h3,h4,h5,h6 {
                font-weight: normal;
                margin: 0;
                line-height: 1.1em;
                color: #000;
            }

            h1 {
                font-size: 2em;
                margin-bottom: .5em;
            }

            h2 {
                font-size: 1.75em;
                margin-bottom: .5142em;
                padding-top: .2em;
            }

            h3 {
                font-size: 1.5em;
                margin-bottom: .7em;
                padding-top: .3em;
            }

            h4 {
                font-size: 1.25em;
                margin-bottom: .6em;
            }

            h5,h6 {
                font-size: 1em;
                margin-bottom: .5em;
                font-weight: bold;
            }

            p,blockquote,ul,ol,dl,form,table,pre {
                line-height: inherit;
                margin: 0 0 1.5em 0;
            }

            ul,ol,dl {
                padding: 0;
            }

            ul ul,ul ol,ol ol,ol ul,dd {
                margin: 0;
            }

            li {
                margin: 0 0 0 2em;
                padding: 0;
                display: list-item;
                list-style-position: outside;
            }

            blockquote,dd {
                padding: 0 0 0 2em;
            }

            pre,code,samp,kbd,var {
                font: 100% mono-space, monospace;
            }

            pre {
                overflow: auto;
            }

            abbr,acronym {
                text-transform: uppercase;
                border-bottom: 1px dotted #000;
                letter-spacing: 1px;
            }

            abbr[title],acronym[title] {
                cursor: help;
            }

            small {
                font-size: .9em;
            }

            sup,sub {
                font-size: .8em;
            }

            em,cite,q {
                font-style: italic;
            }

            img {
                border: none;
            }

            hr {
                display: none;
            }

            table {
                width: 100%;
                border-collapse: collapse;
            }

            th,caption {
                text-align: left;
            }

            form div {
                margin: .5em 0;
                clear: both;
            }

            label {
                display: block;
            }

            fieldset {
                margin: 0;
                padding: 0;
                border: none;
            }

            legend {
                font-weight: bold;
            }

            input[type="radio"],input[type="checkbox"],.radio,.checkbox {
                margin: 0 .25em 0 0;
            }

            /* HTML elements  */

            h1, h2, h3, h4, h5, h6{
                font-weight:normal;
                margin:0;
                line-height:1.1em;
                color:#000;
            }
            h1{font-size:2em;margin-bottom:.5em;}
            h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}
            h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
            h4{font-size:1.25em;margin-bottom:.6em;}
            h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}

            p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
            ul, ol, dl{padding:0;}
            ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
            li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;}
            blockquote, dd{padding:0 0 0 2em;}
            pre, code, samp, kbd, var{font:100% mono-space,monospace;}
            pre{overflow:auto;}
            abbr, acronym{
                text-transform:uppercase;
                border-bottom:1px dotted #000;
                letter-spacing:1px;
            }
            abbr[title], acronym[title]{cursor:help;}
            small{font-size:.9em;}
            sup, sub{font-size:.8em;}
            em, cite, q{font-style:italic;}
            img{border:none;}
            hr{display:none;}
            table{width:100%;border-collapse:collapse;}
            th,caption{text-align:left;}
            form div{margin:.5em 0;clear:both;}
            label{display:block;}
            fieldset{margin:0;padding:0;border:none;}
            legend{font-weight:bold;}
            input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}

            /* //  HTML elements */

            /* base */

            body, table, input, textarea, select, li, button{
                font:1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
                line-height:1.5em;
                color:#444;
            }
            body{
                font-size:12px;
                background:#F3F3F3;
                text-align:center;
            }

            /* // base */

            /* login form */

            #login{
                left: 36%;
                margin-top: 9%;
                background:#fff;
                border:4px solid grey;
                width:390px;
                text-align:left;
                position:relative;
            }
            #login a, #login a:visited{color:#0283b2;}
            #login a:hover{color:#111;}
            #login h1{
                background:#8bbbbb;
                color:#fff;
                font-size:14px;
                padding:18px 23px;
                margin:0 0 1.5em 0;
                border-bottom:1px solid #aaaaaa;
                font:4em "Arial";
            }
            #login .register{
                position:absolute;
                float:left;
                margin:0;
                line-height:30px;
                top:-40px;
                right:0;
                font-size:11px;
            }
            #login p{margin:.5em 25px;}
            #login div{
                margin:.5em 25px;
                padding:4px;
                text-align:right;
                position:relative;
            }
            #login label{
                float:left;
                line-height:30px;
                padding-left:10px;
            }
            #login .field{
                border-top:1px solid #ccc;
                border-right:1px solid #ccc;
                border-bottom:1px solid #ccc;
                border-left:1px solid #ccc;
                width:320px;
                font-size:12px;
                line-height:1em;
                padding:4px;
            }

            #login div.submit{background:none;margin:1em 25px;text-align:left;}
            #login div.submit label{float:none;display:inline;font-size:11px;}
            #login button{
                border:0;
                padding:0 30px;
                height:30px;
                line-height:30px;
                text-align:center;
                font-size:16px;
                color:#768590;
                text-shadow:#8C8C8C;
                background:#D3DBDB;
                -moz-border-radius:0px;
                -webkit-border-radius:0px;
                border-radius:0px;
                cursor:pointer;
            }

            #login .forgot{text-align:right;font-size:11px;}
            #login .versao{float:right; text-align:right;font-size:9px;}
            #login .back{padding:1em 0;border-top:1px solid #eee;text-align:right;font-size:11px;}
            #login .error{
                float:left;
                position:absolute;
                left:95%;
                top:-5px;
                background:#890000;
                padding:5px 10px;
                font-size:11px;
                color:#fff;
                text-shadow:#500 0 1px 0;
                text-align:left;
                white-space:nowrap;
                border:1px solid #500;
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                border-radius:3px;
                -moz-box-shadow:0 0 5px #700;
                -webkit-box-shadow:0 0 5px #700;
                box-shadow:0 0 5px #700;
            }


            /* //  login form */
            #login .logo_container {
                color:#fff;
                font-size:14px;
                padding:0px 30px;
                margin:0 0 1.5em 0;
                //border-bottom:0px solid grey;
            }

            #vitro_logo {
                font:3em "Arial", sans-serif;
                color:#ccc;
                float:left;
                margin:0px !important;
                padding:0px !important;
                -moz-border-radius:0px !important;
                -webkit-border-radius:0px !important;
                border-radius:0px !important;
                text-align:left !important;
                position:relative !important;
                width:100px;
            }

            #vitro_logo .comprador{
                font:0.7em "Arial", sans-serif;
                color:#696969;
                margin:8px;
            }

            #vitro_logo .fornecedor{
                font:0.7em "Arial", sans-serif;
                color:#696969;
                margin:8px;
            }

            #formEsqueci .ui-dialog {
                border: 0px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                border-radius:5px;
            }

            #W3Cicone {
                position: fixed;
                bottom: 14px;
                right: 14px;
                z-index: 99;
                cursor: pointer;
                border: 0px;
                visibility: visible;
                width: 88px;
                height: 31px;
                max-height: 31px;
                max-width: 88px;
                overflow: hidden;
                display: block;
                padding: 0px;
            }
            /**

            Customiza��o para logo do cliente nas telas de login

            **/

            #cliente_logo_fornecedor{
                content: url('resources/imagem/sisccaLogo1.png');/** S� para WEBKIT: Chrome e Safari **/
                background: transparent url('resources/imagem/sisccaLogo1.png'); /** FF **/
                background-image: url('resources/imagem/sisccaLogo1.png'); /** IE **/
                display: block; /** FF **/
                width: 390px; /** IE **/
                height: 135px; /** IE **/
                background-repeat: no-repeat; /** IE **/
                margin-left: -30px;/** Ajustar conforme tamanho da logo do cliente **/
                border: 0px; /** FF **/
            }

        </style>
    </h:head>
    <body>
        <p:messages id="msgs" autoUpdate="true" />
        <h:form id="login" prependId="false">

            <script type="text/javascript">
                //<![CDATA[
                jQuery(function($) {

                    // simple jQuery validation script
                    $('#login').submit(function() {

                        var valid = true;
                        var errormsg = 'Campo obrigatório';
                        var errorcn = 'error';

                        $('.' + errorcn, this).remove();

                        $('.required', this).each(function() {
                            var parent = $(this).parent();
                            if ($(this).val() == '') {
                                var msg = $(this).attr('title');
                                msg = (msg != '') ? msg : errormsg;
                                $('<span class="error"/>').html(msg)
                                        .appendTo(parent)
                                        .fadeIn('fast')
                                        .click(function() {
                                            $(this).remove();
                                        })
                                valid = false;
                            }
                            ;
                        });

                        return valid;
                    });

                })
                //]]>
            </script>

            <div class="logo_container">
                <span id='cliente_logo_fornecedor' />
            </div>

            <div>
                <label for="cpf">CPF:</label>
                <p:inputMask converter="cpfConverter" mask="999.999.999-99" value="#{usuarioController.cpf}" styleClass="field required maskCPF" id="cpf" title="Informe o CPF"/>
            </div>

            <div>
                <label for="pass">Senha:</label>
                <h:inputSecret value="#{usuarioController.senha}" styleClass="field required" id="pass" title="Informe a senha de acesso"/>
            </div>

            <div class="submit">
                <p:commandButton id="btnAcessar" value="ACESSAR" action="#{usuarioController.autenticar()}" ajax="false"/>&nbsp;&nbsp;
            </div>

        </h:form>
    </body>
</html>